<template>
    <view id="home" >
        <view class="loading-part" v-if="isLoading">

        </view>
        <view class="content" >
            <view class="statistics">
                <uni-grid  :showBorder="false" :column="3" :highlight="false">
                    <uni-grid-item class="stat-item">
                        <view class="stat-item-first"><text class="big-num">{{numberOfEvents}}</text> 场</view>
                        <view class="stat-item-last">赛事数量</view>
                    </uni-grid-item>
                    <uni-grid-item class="stat-item">
                        <view class="stat-item-first"><text class="big-num">{{numberOfMembers}}</text> 人</view>
                        <view class="stat-item-last">会员数量</view>
                    </uni-grid-item>
                    <uni-grid-item class="stat-item">
                        <view class="stat-item-first"><text class="big-num">{{affiliates}}</text> </view>
                        <view class="stat-item-last">下属机构</view>
                    </uni-grid-item>
                </uni-grid>
            </view>
            <uni-grid class="features-part text-center" :showBorder="false" :column="4" @change="goDetailPage">
                <uni-grid-item  v-for="(item,index) in features"
                    :key="index" class="features-item" >
                    <view class="grid-item-box">
                        <!-- <image class="features-logo" :src="item.icon"></image> -->
                        <text class="msfont features-logo" :class="item.classname"></text>
                        <view class="features-text">{{item.name}}</view>
                        <view v-if="item.badge" class="grid-dot">
                            <uni-badge class="badge-color" :text="item.badge"  type="error"/>
                        </view>
                    </view>
                </uni-grid-item>
            </uni-grid>
            <uni-card class="detail-part" title="协会数据" >
                <uni-grid class="detail-grid" :square="false" :showBorder="false" :column="3">
                    <uni-grid-item class="detail-item" v-for="(item,index) in detailList" :key="index">
                        <view class="grid-item-box">
                            <view><text class="middle-num">{{item.num}}</text></view>
                            <view class="detail-text">{{item.name}}</view>
                        </view>
                    </uni-grid-item>
                </uni-grid>
            </uni-card>
        </view>
    </view>
</template>
<script>
    import uLink from '@/components/uLink.vue'
    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
    import uniCard from "@/components/uni-card/uni-card"
    import uniBadge from "@/components/uni-badge/uni-badge.vue"
    import { getMsStatistics, getMsNum, getUserPow } from "@/common/api.js"
    export default {
        components: {
            uLink,
            uniGrid,
            uniGridItem,
            uniCard,
            uniBadge
        },
        data() {
            return {
                navigateFlag: false,
                orgname: "浙江省围棋协会",
                numberOfEvents: 0,
                numberOfMembers: 0,
                affiliates: 0,                 //g.yunbisai.com/img/public/default-avatar.png
                featuresList: [{
                        id:1,
                        name: '赛事审核',
                        url: '/pages/competitionAudit/event/authorizedEvent',
                        badge: 0,
                        classname:'ms-Cup',
                        pow:false
                    },
                    {
                        id:2,
                        name: '成绩审核',
                        url: '/pages/performanceReview/performanceReview',
                        badge: 0,
                        classname:'ms-grade',
                        pow:false
                    },
                    {
                        id:3,
                        name: '会员管理',
                        url: '/pages/memberManagement/memberManagement',
                        badge: 0,
                        classname:'ms-memberManagement',
                        pow:false
                    },
                    {
                        id:4,
                        name: '钱包管理',
                        url: '/pages/wallet/wallet',
                        badge: '',
                        classname:'ms-wallet',
                        pow:false
                    },
                    {
                        id:5,
                        name: '会员转会',
                        url: '/pages/memberTransfer/memberTransfer',
                        badge: '',
                        classname:'ms-memberTransfer',
                        pow:false
                    },
                    {
                        id:6,
                        name: '个人设置',
                        url: '/pages/home/personalSettings/personalSettings',
                        badge: '',
                        classname:'ms-bindAccount',
                        pow:false
                    },
                ],
                features:[],
                detailList: [],
                isLoading:true
            }
        },
        onShareAppMessage() {
            return {
                title: '分享',
                path: '/pages/home/index'
            }
        },
        methods: {
            goDetailPage(e) {
                let {index} = e.detail;
                if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                if(this.features[index].url){
                    uni.navigateTo({
                        url: this.features[index].url
                    })
                }
                setTimeout(() => {
                    this.navigateFlag = false;
                }, 200)
            },
            getData(){
                let p= getMsStatistics({type:'orgmem'}).then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        this.detailList=[
                            { num:data.data.yes_org_num,name: '昨日新增机构' },
                            { num:data.data.event_num_month,name: '近一月赛事' },
                            { num:data.data.event_num_year,name: '本年赛事总数' },
                            { num:data.data.yes_mem_num,name: '昨日新增会员' },
                            { num:data.data.week_mem_num,name: '近七日新增会员' },
                            { num:data.data.week_org_num,name: '近七日新增机构' }
                        ]
                        this.numberOfEvents=data.data.event_num;
                        this.numberOfMembers=0;
                        if(data.data.mem_num && data.data.mem_num.length){
                            for(let i=0;i<data.data.mem_num.length;i++){
                                this.numberOfMembers+=(data.data.mem_num[i].sex_num-0)
                            }
                        }
                        this.affiliates=data.data.org_num;
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.navigateTo({
                            url: '/pages/home/login'
                        })
                    }else{
                        uni.showToast({
                        	position: 'center',
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            },
            getToNum(){
                let p = getMsNum().then((res)=>{
                    uni.stopPullDownRefresh();
                    const data = res.data
                    if(data.errcode==0){
                        this.featuresList[0].badge=data.data.event_num;
                        this.featuresList[1].badge=data.data.grade_num;
                        this.featuresList[2].badge=data.data.mem_num;
                        this.featuresList[4].badge=data.data.tran_num;
                    }else if(data.errcode==1000 || data.errcode==1001 || data.errcode==255){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	position: 'center',
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p
            },
            getUserPower(){
                let p = getUserPow().then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        this.features=[];
                        let arr=[];
                        let powFlag=true;
                        data.data.forEach((e)=>{
                            switch(e){
                                case 94:
                                case 29:powFlag?arr.push(this.featuresList[0]):0;powFlag=false;break;
                                case 120:arr.push(this.featuresList[1]);break;
                                case 22:arr.push(this.featuresList[2]);break;
                                case 40:arr.push(this.featuresList[3]);break;
                                case 65:arr.push(this.featuresList[4]);break;
                                case 18:uni.setStorageSync('_personalSettings_',1);/*arr.push(this.featuresList[5]);*/break;
                            }
                        })
                        arr.sort((a,b)=>{
                            return a.id-b.id;
                        })
                        arr.push(this.featuresList[5]);
                        this.features=arr;
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p
            }
        },
        onLoad() {
            uni.setNavigationBarTitle({
                title: uni.getStorageSync('account').org_name
            });
            uni.showLoading({
                title: '加载中'
            });
        },
        onShow() {
            uni.getStorageSync('account').level!=1?this.featuresList[0].name='赛事授权':0;
            let init = async ()=>{
                await this.getData();
                await this.getToNum();
                await this.getUserPower()
                setTimeout(()=>{
                    uni.hideLoading();
                    this.isLoading=false;
                },100)
            }
            init()
        },
        onPullDownRefresh(){
            let init = async ()=>{
                await this.getData();
                await this.getToNum();
            }
            init()
        },
    }
</script>

<style lang="scss">
    page{
        background: #fff;
    }
    #home {
        position: relative;

        height: 100%;
        .loading-part{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            z-index: 100;
        }
        .header {
            // overflow: hidden;
            // top: 0;
            // left: 0;
            // right: 0;
            // position: fixed;
            height: 100rpx;
            line-height: 100rpx;
            // text-align: center;
            background-color: #fff;
            // box-shadow: 0 1px 6px #ccc;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 5;

            .org-name {
                text-align: left;
                padding-left: 120rpx;
                font-size: 32rpx;
                height: 100rpx;
                line-height: 100rpx;
            }

            .logo {
                position: absolute;
                top: 20rpx;
                left: 30rpx;
                padding-right: 0;
                color: #ddd;
                font-size: 28rpx;

                width: 60rpx;
                height: 60rpx;
                border: 1rpx solid #ddd;
                border-radius: 50%;
            }
        }

        .content {
            padding-top: 30rpx;
            .statistics {
                margin: 30rpx;
                margin-top: 0;
                margin-bottom: 0;
                width: auto;
                background: #1A66FF;
                border: 1rpx solid transparent;
                border-radius: 16rpx;
                overflow: hidden;

                .stat-item {
                    background: #1A66FF;
                    color: #fff;
                    text-align: center;

                    .stat-item-first {
                        padding-top: 40rpx;
                    }

                    .stat-item-last {}
                }

                .big-num {
                    font-size: 36rpx;
                    padding-right: 10rpx;
                }
            }

            .features-part {
                margin: 30rpx;
                width: auto;

                .grid-item-box {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 30rpx 0;

                    .features-logo {
                        width: 80rpx;
                        height: 80rpx;
                    }

                    .features-text {
                        // padding-top: 10rpx;
                    }

                    .grid-dot {
                        position: absolute;
                        top: 10rpx;
                        right: 30rpx;
                    }
                    .msfont{
                        color: #0066cc;
                        // background: #0066cc;
                        font-size: 56rpx;
                        line-height: normal;
                        padding-top: 12rpx;
                    }
                    .badge-color{
                        // background: #FF5E5E;
                        // color: #fff;
                    }
                }
            }

            .detail-part {
                text-align: left;
                // border: 1px solid #ddd;
                margin-top: 50rpx;
                border-radius: 16rpx;
                overflow: hidden;
                box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.1);

                .detail-item {
                    text-align: center;

                    .middle-num {
                        font-size: 32rpx;
                        font-weight: bold;
                    }

                    .detail-text {
                        padding-top: 10rpx;
                        font-size: 24rpx;
                        padding-bottom: 20rpx;
                    }
                }
            }
        }
    }
</style>
